<template>
  <el-dropdown trigger="click" @visible-change="isClick = !isClick">
    <i class="MC_iconfont MC_icon-zidingyi" :class="isClick ? 'icon-active' : ''"></i>
    <template #dropdown>
      <div class="search-checkbox">
        <div class="search-header">
          {{ title }}
        </div>
        <el-input placeholder="请输入搜索内容" v-model.trim="filterText" clearable></el-input>
        <vue-draggable-next v-model="DataList" :handle="'.MC_iconfont'" @end="dragEnd" class="draggable-box">
          <div
            v-for="(item, index) in DataList"
            :key="index"
            v-show="item.title && item.title.indexOf(filterText) > -1 && item.key !== 'oprate'"
            class="search-list"
          >
            <span class="MC_iconfont MC_icon-tuodong-shu"></span>
            <el-checkbox
              v-model="item.show"
              @change="checkChange(item)"
              :disabled="(item.show && checkBoxDisable) || item.disabled"
            >
              {{ item.title }}
            </el-checkbox>
          </div>
        </vue-draggable-next>
      </div>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { deepClone } from '../../../utils/common'
import { VueDraggableNext } from 'vue-draggable-next'
import { computed, defineComponent, reactive, watch, onMounted, toRefs } from 'vue'
export default defineComponent({
  name: 'SearchCheckbox',
  components: { VueDraggableNext },
  props: {
    data: {
      // 表头数据
      type: Array,
      default: () => []
    },
    title: {
      // 标题
      type: String,
      default: '自定义表头'
    }
  },
  emits: ['onCheckChange'],
  setup(props, { emit }) {
    const state = reactive({
      DataList: [] as any[], // header list
      filterText: '', // 过滤值
      isClick: false // 表头操作按钮的显隐
    })

    watch(props.data, () => {
      initChecked()
    })

    const checkBoxDisable: any = computed(() => {
      // 只剩一个checkbox禁止取消
      let num = 0
      state.DataList.forEach((item: any) => {
        if (item.show && item.prop !== 'oprate') {
          num++
        }
      })
      return num === 1
    })

    const checkChange = (data: any) => {
      // check-box状态变化
      emit('onCheckChange', state.DataList, null, data)
    }

    const initChecked = () => {
      const DataList = deepClone(props.data)
      DataList.forEach((item: any) => {
        // eslint-disable-next-line no-prototype-builtins
        if (typeof item !== 'string' && !item.hasOwnProperty('show')) {
          item.show = true
        }
      })
      state.DataList = DataList
      emit('onCheckChange', DataList, true)
    }

    const dragEnd = () => {
      // 拖拽结束
      emit('onCheckChange', state.DataList)
    }

    onMounted(() => {
      initChecked()
    })

    return {
      checkChange,
      dragEnd,
      checkBoxDisable,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.MC_icon-zidingyi
  cursor pointer
.icon-active
  color #008cee
.draggable-box
  max-height 250px
  overflow-y scroll
.search-checkbox
  :deep(.el-checkbox__input).is-checked + .el-checkbox__label
    color rgba(0, 0, 0, 0.66)
  :deep(.el-checkbox__label)
    font-size 14px
  .search-list
    color #686e84
    margin-top 10px
    display flex
    align-items center
  .search-header
    padding 0 0 12px
    font-weight bold
    color #303753
    border-bottom 1px solid #DCE8F1
    margin-bottom 10px
</style>
